<script setup>
  import { ref } from 'vue'
  defineProps({
    msg: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: false,
      default (){
        return {
          title: '气动固定式球阀',
          model: 'Q647F(N. P. H, Y) -PN16, 25, 40',
          infor: '气动固定式球阀是新一代高性能球阀，适用于长输管线和一般工业管线，其强度、安全性、耐恶劣环境性等在设计时进行了特殊考虑，适用于各种腐蚀性和非腐蚀性介质',
          url: '/news/detail'
        }
      }
    },
    tags: {
      type: Object,
      required: false,
      default (){
        return [
            {title: 'Globe type调节阀', url: '/'},
            {title: '自立式调节阀', url: '/'},
            {title: 'Globe type调节阀', url: '/'},
            {title: 'ZSDV/SPV球阀', url: '/'},
            {title: 'ZSDV/SPV闸阀/截止阀', url: '/'},
        ]
      }

    }
  })
  
  const count = ref(0)
  </script>
  
  <template>
    <div class="w-full h-auto mobile:h-full mobile:p-6 mobile:pt-[80px] self-center bg-no-repeat ">
        <div class="flex mb-[70px] mobile:mb-8">
            <span class="wen-index-title">产品中心</span>
        </div>
        <div class="flex mobile:block">
            <div class="w-full flex-auto wow animate__animated animate__fadeInUp timing">
                <h3 class="text-5xl leading-normal text-dominant mb-10 mobile:mb-6 mobile:text-2xl mobile:text-tblack"><a :href="data.url">{{ data.title }}</a><p class="mobile:hidden">{{ data.model }}</p></h3>
                <div class="mt-16 text-[28px] mobile:my-8 mobile:text-base leading-loose flex items-center"><span class="w-16 h-16 mobile:w-8 mobile:h-8 text-center mr-3 inline-block rounded-full bg-dominant text-white"><span class="pl-1 ilmobile:translate-y-[1px] mobile:pl-[1px] mobile:pt-2 fa fa-angle-right fa-lg"></span></span><span class="text-tblack leading-loose font-bold">查看产品详情</span></div>
            </div>
            <div class="w-full flex-auto z-10">
                <div class="w-full max-w-[600px] end-0 float-right -translate-y-20 mobile:translate-y-0">
                    <a href="/"><img class="w-full rounded-3xl mx-auto mb-6 mobile:max-w-[280px] hover:scale-[1.20] timing duration-[250ms]" src="../assets/WX20240324-021156@2x 1.png" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full absolute bottom-0 left-0 bg-undercolor2 mobile:bg-transparent">
        <div class="w-full container self-center mx-auto py-14 mobile:py-16 mobile:px-6 mobile:bg-[url('/src/assets/fa-angle-down-double.svg')] mobile:bg-[center_bottom_1em] bg-no-repeat">
            <ul class="w-full grid grid-cols-5 grid-flow-row gap-2 justify-items-center mobile:grid-cols-2 mobile:gap-1">
                <li v-for="(item, index) in tags" class="w-full active mobile:last:col-span-2">
                    <a class="text-xl w-full grid wen-btn bg-white hover:bg-dominant hover:text-white active:bg-dominant active:text-white h-[92px] mobile:h-[56px] mobile:text-sm content-center text-center" :class="{active:index==0}" :href="item.url">{{ item.title }}</a>
                </li>
            </ul>
        </div>
    </div>
  </template>
  <style scoped>
  </style>
  